<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Along</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
  <!--引用示例页面样式表-->
  <link rel="stylesheet" href="./static/demo/cesium/style.css" />
</head>

<body>
  <div id="GlobeView"></div>
  <script>
    var webGlobe = new Cesium.WebSceneControl("GlobeView", {
      terrainExaggeration: 1,
    });
    var blueImage = new Cesium.UrlTemplateImageryProvider({
      url:
        "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 12,
    });
    webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);

    var map = webGlobe.viewer;

    initMap();
    initMapv();

    function initMap() {
      var center = Cesium.Cartesian3.fromDegrees(114, 30, 10000000.0);
      map.scene.camera.setView({
        destination: center,
      });
    }

    function initMapv() {
      var randomCount = 500;
      var data = [];
      while (randomCount--) {
        data.push({
          geometry: {
            type: "Point",
            coordinates: [75 + Math.random() * 50, 20.3 + Math.random() * 20],
          },
          count: 30 * Math.random(),
        });
      }

      // 构建对应的dataset
      var dataSet = new mapv.DataSet(data);

      // 设置对应的参数
      // https://github.com/huiyan-fe/mapv/blob/master/API.md
      var options = {
        context: "2d", //cesium必须设置画布为2d
        cesium: {
          postRender: true,
          postRenderFrame: 0,
        },
        fillStyle: "rgba(55, 50, 250, 0.8)",
        size: 40,
        globalAlpha: 0.5,
        label: {
          show: true,
          fillStyle: "white",
          shadowColor: "yellow",
          font: "15px Arial",
          shadowBlur: 10,
        },
        gradient: {
          0: "rgba(49, 54, 149, 0)",
          0.2: "rgba(69,117,180, 0.7)",
          0.3: "rgba(116,173,209, 0.7)",
          0.4: "rgba(171,217,233, 0.7)",
          0.5: "rgba(224,243,248, 0.7)",
          0.6: "rgba(254,224,144,0.7)",
          0.7: "rgba(253,174,97,0.7)",
          0.8: "rgba(244,109,67,0.8)",
          0.9: "rgba(215,48,39,0.8)",
          0.95: "rgba(165, 0, 38,0.8)",
        },
        shadowColor: "rgba(255, 255, 50, 1)",
        shadowBlur: 10,
        max: 100,
        draw: "grid",
      };

      // 声明cesium的mapv图层并将其显示到三维球上
      var mapvLayer = new CesiumZondy.Overlayer.MapvLayer(
        map,
        dataSet,
        options
      );
    }
  </script>
</body>

</html>